<!--
 * @Author: Dorange.Wang
 * @Date: 2021-07-20 09:22:52
 * @LastEditors: your name
 * @LastEditTime: 2021-07-20 13:56:26
 * @Description: file content
-->
<template>
  <div>
    <img class="login__app-icon" v-if="appInfo.icon" :src="appInfo.icon" />
    <img class="login__app-icon" v-else src="@/assets/logo.jpg" />

    <span>{{ appInfo.appName }}</span>
    <van-cell-group>
      <van-field
        v-model="username"
        required
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="password"
        required
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </van-cell-group>
    <van-button type="primary" block round @click="handleLogin"
      >登录</van-button
    >
  </div>
</template>

<script>
// import md5 from "md5";
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },

  computed: {
    ...mapGetters(["appInfo"]),
  },

  methods: {
    ...mapActions(["userLogin"]),
    async handleLogin() {
      const { username, password } = this;
      const params = {
        username,
        password,
      };
      await this.userLogin(params);
      this.$router.push("/workbench");
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  &__app-icon {
    height: 100px;
    width: 100px;
  }
}
</style>
